import React from 'react';
// import Action from './Action';
// import Store from "./Store";
import {NavLink} from 'react-router-dom';
import {Flex, Button, WhiteSpace, WingBlank, Carousel, Badge, Grid, ListView, NavBar, Icon, List, Stepper, Toast, SwipeAction} from 'antd-mobile';
import {Template} from '../components/Template';
import {Footer} from "../components/Main";
import {Lists} from '../components/List';
import $ from 'jquery';
import PropTypes from 'prop-types';
import '../index.css';
import banner01 from '../img/banner01.jpg';
import banner02 from '../img/banner02.jpg';
import banner03 from '../img/banner03.jpg';
import banner05 from '../img/banner05.jpg';
import banner06 from '../img/banner06.jpg';
import banner07 from '../img/banner07.jpg';
import banner09 from '../img/banner09.jpg';

//列表
const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
    const dataBlob = {};
    for (let i = 0; i < NUM_ROWS; i++) {
        const ii = (pIndex * NUM_ROWS) + i;
        dataBlob[`${ii}`] = `row - ${ii}`;
    }
    return dataBlob;
}

//cookie
let Cookie={
    //获得cookie值
    getCookie:(name)=>{
        var str = document.cookie;
        var arr = str.split("; ");
        for(var i = 0; i < arr.length; i++) {
            var arr1 = arr[i].split("=");
            if(arr1[0] == name) {
                return arr1[1];
            }
        }
    },
    //设置cookie
    setCookie:(name, val, n)=>{
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + n);
        document.cookie = name + "=" + val + ";expires=" + oDate;
    },
    /*//去除cookie
    removeCookie:(name)=>{
        setCookie(name, 1, -1);
    }*/
};

//今日特卖
export class SpecialSale extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            list: [],
            dataSource,
            isLoading: true,
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            // arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                _this.setState({list: data})
            }
        });
        // simulate img loading Ajax
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 600);
    }

    onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log('reach end', event);
        this.setState({isLoading: true});
        setTimeout(() => {
            this.rData = {...this.rData, ...genData(++pageIndex)};
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 1000);
    }

    render() {
        let _this = this;
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#fff',
                    height: 3,
                }}
            />
        );
        let index = _this.state.list.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = _this.state.list.length - 1;
            }
            const obj = _this.state.list[index--];
            return (
                <NavLink to={{pathname: "/detail", state: {id: obj.id}}} key={rowID}
                         style={{display: 'block', padding: '0 15px'}}>

                    <div style={{display: 'flex', padding: '15px 0'}}>
                        <img style={{width: '100px', height: '100px', marginRight: '20px'}} src={obj.img} alt=""/>
                        <Flex.Item style={{
                            lineHeight: 1.6,
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'space-between'
                        }}>
                            <Flex direction='column' align='start'>
                                <div style={{fontSize: '16px', fontWeight: 'bold'}}>{obj.name}</div>
                                <div style={{fontSize: '14px', color: '#888'}}>{obj.des}</div>
                                <div>
                                    <Badge text="特卖" hot style={{
                                        padding: '0 5px',
                                        backgroundColor: '#f1f1f1',
                                        borderRadius: 2,
                                        color: 'red'
                                    }}/>
                                    <Badge text="直降" hot style={{
                                        marginLeft: 12,
                                        padding: '0 5px',
                                        backgroundColor: '#f1f1f1',
                                        borderRadius: 2,
                                        color: 'red'
                                    }}/>
                                </div>
                            </Flex>
                            <Flex justify='between'>
                                <span style={{fontSize: '14px', color: '#FF6E27'}}>¥{obj.pic}</span>
                                <Button className='banner' type="warning" inline size="small">马上抢</Button>
                            </Flex>
                        </Flex.Item>
                    </div>
                </NavLink>
            );
        };
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner' autoplay={true} infinite>
                        {_this.state.data.map((val, index) => (
                            <NavLink key={index} to='#' style={{
                                display: 'inline-block',
                                width: '100%',
                                height: this.state.imgHeight
                            }}>
                                <img src={val.img}
                                     alt=''
                                     style={{width: '100%', verticalAlign: 'top'}}
                                     onLoad={() => {
                                         // fire window resize event to change height
                                         window.dispatchEvent(new Event('resize'));
                                         this.setState({imgHeight: 'auto'});
                                     }}/>
                            </NavLink>
                        ))}
                    </Carousel>
                    <WingBlank>
                        <Flex justify='around' className='lay-dl'>
                            <dl>
                                <dt>
                                    <img src='https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png'
                                         style={{borderRadius: '50%', width: '50px', height: '50px'}}/>
                                    <WhiteSpace/>
                                </dt>
                                <dd>新店主专享</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src='https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png'
                                         style={{borderRadius: '50%', width: '50px', height: '50px'}}/>
                                    <WhiteSpace/>
                                </dt>
                                <dd>新疆专区</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src='https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg'
                                         style={{borderRadius: '50%', width: '50px', height: '50px'}}/>
                                    <WhiteSpace/>
                                </dt>
                                <dd>VIP专区</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src='https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png'
                                         style={{borderRadius: '50%', width: '50px', height: '50px'}}/>
                                    <WhiteSpace/>
                                </dt>
                                <dd>品牌特卖</dd>
                            </dl>
                        </Flex>

                        <Flex justify='between' style={{lineHeight: '1.5', height: '200px'}}>
                            <WingBlank style={{background: '#f1f1f1', width: '48%', height: '100%'}}>
                                <WhiteSpace/>
                                <NavLink to={{pathname: "/detail", state: {id: 1}}}>
                                    <Flex direction='column' justify='between'>
                                        <Flex direction='column'>
                                            <h3>手机主题</h3>
                                            <p style={{fontSize: '14px', color: '#888'}}>畅想9plus低至1599元</p>
                                        </Flex>
                                        <WhiteSpace size='lg'/>
                                        <img src='https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png'
                                             width='80%' height='80%'/>
                                    </Flex>
                                </NavLink>
                            </WingBlank>
                            <Flex direction='column' justify='between' style={{width: '48%'}}>
                                <NavLink to={{pathname: "/detail", state: {id: 2}}}
                                         style={{background: '#f1f1f1', width: '100%'}}>
                                    <WhiteSpace/>
                                    <WingBlank>
                                        <h3>劲爆秒杀￥18.9</h3>
                                        <p style={{fontSize: '14px', color: '#888'}}>食养专场 椴木银耳</p>
                                        <Flex justify='between'>
                                            <Badge text='GO>'></Badge>
                                            <img src='https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg'
                                                 width='45' height='45'/>{/*定位，右下角*/}
                                        </Flex>
                                    </WingBlank>
                                </NavLink>
                                <NavLink to={{pathname: "/detail", state: {id: 3}}}
                                         style={{background: '#f1f1f1', width: '100%', marginTop: '5px'}}>
                                    <WhiteSpace/>
                                    <WingBlank>
                                        <h3>苏宁超市疯抢日</h3>
                                        <p style={{fontSize: '14px', color: '#888'}}>最高满199减60</p>
                                        <Flex justify='between'>
                                            <Badge text='GO>'></Badge>
                                            <img src='https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png'
                                                 width='45' height='45'/>{/*定位，右下角*/}
                                        </Flex>
                                    </WingBlank>
                                </NavLink>
                            </Flex>
                        </Flex>
                        <WhiteSpace/>
                    </WingBlank>
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        <WingBlank>
                            <img src={banner03} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>

                    <div>
                        <ListView
                            ref={el => this.lv = el}
                            dataSource={this.state.dataSource}
                            renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
                                {this.state.isLoading ? 'Loading...' : 'Loaded'}
                            </div>)}
                            renderRow={row}
                            renderSeparator={separator}
                            className="am-list"
                            pageSize={4}
                            useBodyScroll
                            onScroll={() => {
                                console.log('scroll');
                            }}
                            scrollRenderAheadDistance={500}
                            onEndReached={_this.onEndReached}
                            onEndReachedThreshold={10}
                        />
                    </div>
                </section>
            </Template>
        )
    }
}

// 好东西
export class GoodThing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            // arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                // console.log(data);
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a key={index} href="#" style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}>
                                <img src={val.img}
                                     alt=""
                                     style={{width: '100%', verticalAlign: 'top'}}
                                     onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}/>
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner05} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 美妆个护
export class BeautyMakeup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            // arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner05} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 食品生鲜
export class FreshFood extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                console.log(data);
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner05} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 家居生活
export class HomeLife extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

   /* changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner06} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 服饰鞋包
export class DressShoes extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

   /* changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                console.log(data);
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner06} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 母婴童装
export class MotherChild extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                console.log(data);
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner06} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 健康保健
export class HealthCare extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

/*    changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner07} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

// 舒宁易购
export class ShuNin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            imgHeight: 180,
        };
        // this.changes = this.changes.bind(this)
    }

    /*changes() {
        this.setState({
            arr: Store.getState()
        })
    }*/

    componentDidMount() {
        let _this = this;
        // Store.subscribe(this.changes);
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods;
                _this.setState({list: data})
            }
        });
        // simulate img loading
        setTimeout(() => {
            _this.setState({
                data: [{img: banner01}, {img: banner02,}, {img: banner03,}, {img: banner09,}, {img: banner05,}, {img: banner06,}],
            });
        }, 100);
    }

    render() {
        var _this = this;
        return (
            <Template>
                <WhiteSpace size='xs'/>
                <section className='section'>
                    {/*轮播图*/}
                    <Carousel className='banner'
                              autoplay={true}
                              infinite
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={index}
                                href="#"
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.img}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    {/*九宫格*/}
                    <Grid data={_this.state.list}
                          columnNum={3}
                          hasLine={false}
                          renderItem={dataItem => (
                              <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                  <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                      <img src={dataItem.img}
                                           style={{width: '75px', height: '75px', borderRadius: '50%'}}
                                           alt=""/>
                                      <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                          <span>{dataItem.name}</span>
                                      </div>
                                  </Flex>
                              </NavLink>
                          )}
                    />
                    {/*分割*/}
                    <div>
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*分类选*/}
                    <div style={{borderBottom: '1px solid #cecece'}}>
                        <WhiteSpace/>
                        {/*图片*/}
                        <WingBlank>
                            <img src={banner09} width='100%' height='120' style={{borderRadius: '5px'}}/>
                        </WingBlank>
                        {/*滑块，更多*/}
                        <Grid className='banner'
                              data={_this.state.list}
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={1}
                              dots={false}
                              hasLine={false}
                              onClick={_el => console.log(_el)}
                              renderItem={dataItem => (
                                  <NavLink to={{pathname: "/detail", state: {id: dataItem.id}}}>
                                      <Flex direction='column' justify='center' style={{padding: '12.5px'}}>
                                          <img src={dataItem.img} style={{width: '75px', height: '75px'}} alt=""/>
                                          <div style={{color: '#888', fontSize: '14px', marginTop: '12px'}}>
                                              <span>{`￥${dataItem.pic}`}</span>
                                          </div>
                                      </Flex>
                                  </NavLink>
                              )}
                        />
                        <WhiteSpace size='lg' style={{background: '#cecece'}}/>
                    </div>
                    {/*列表*/}
                    <div>
                        <Lists></Lists>
                    </div>
                </section>
            </Template>
        )
    }
}

function offline() {
    Toast.offline('对不起，暂不支持此功能', 2);
}

//详情
export class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            val: 3,
            zongjia: ''
        }
    }

    static contextTypes = {
        router: PropTypes.object.isRequired,
    }

    componentDidMount() {
//		console.log(this.props)
        var _this = this;
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                var data = data.goods[_this.props.location.state.id]
                _this.setState({list: data, zongjia: data.pic * _this.state.val})
            }
        });
        Toast.loading('Loading...', 30, () => {
            console.log('Load complete !!!');
        });

        setTimeout(() => {
            Toast.hide();
        }, 1000);
    }

    onChange = (val) => {
        // console.log(val);
        var zongjia = this.state.list.pic * val;
        this.setState({val, zongjia});
    }

    render() {
        var _this = this;
        return (
            <div style={{height: '100vh', overflow: 'hidden'}}>
                {/*头部*/}
                <NavBar className='banner'
                        mode="dark"
                        icon={<Icon type="left"/>}
                        onLeftClick={() => this.context.router.history.goBack()}
                >商品详情</NavBar>
                {/*内容*/}
                <section className='banner'>
                    <img src={_this.state.list.img} style={{width: '100%', height: '60vh'}}/>
                    <List style={{fontSize: '18px', lineHeight: '1.8'}}>
                        <WhiteSpace/>
                        <List.Item>
                            <h2>{_this.state.list.name}</h2>
                            <p style={{color: '#888'}}>{_this.state.list.des}</p>
                            <p style={{color: 'red'}}>￥{_this.state.list.pic}</p>
                        </List.Item>
                        <List.Item
                            wrap
                            extra={
                                <Stepper
                                    style={{width: '100%', minWidth: '100px'}}
                                    showNumber
                                    max={99}
                                    min={1}
                                    value={this.state.val}
                                    onChange={this.onChange}
                                />}>数量</List.Item>
                        <List.Item>
                            <Flex justify='between'>
                                <Flex.Item>总价:{this.state.zongjia}</Flex.Item>
                                <Flex.Item>
                                    <Button type='warning' onClick={() => (this.context.router.history.push({
                                        pathname: '/cart',
                                        state: {id: _this.state.list.id,count:_this.state.val}
                                    }))}>购物车</Button>
                                </Flex.Item>
                                <Flex.Item>
                                    <Button type='primary' onClick={offline}>立即购买</Button>
                                </Flex.Item></Flex>
                        </List.Item>
                    </List>
                </section>
            </div>
        )
    }
}

//购物车
export class Cart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            val: this.props.location.state.count,
            zongjia: ''
        }
    }

    static contextTypes = {
        router: PropTypes.object.isRequired,
    }

    componentDidMount() {
//		console.log(this.props)
        var _this = this;
        // console.log(_this.props.location.state.id)
        $.ajax({
            type: "get",
            url: "base.json",
            success: data => {
                if (_this.props.location.state.id!='') {
                    var data = data.goods[_this.props.location.state.id];
                    _this.setState({list: data, zongjia: data.pic * _this.state.val})
                } else {
                    var data = [];
                    _this.setState({list: data, zongjia: 0})
                }
            }
        });
        Toast.loading('Loading...', 30, () => {
            console.log('Load complete !!!');
        });

        setTimeout(() => {
            Toast.hide();
        }, 1000);

    }
    message(){
        var _this=this;
        if (_this.props.location.state.id!='') {
            return(<List style={{fontSize: '18px', lineHeight: '1.8'}}>
                <WhiteSpace/>
                <SwipeAction
                    style={{ backgroundColor: 'gray' }}
                    autoClose
                    right={[
                        {
                            text: 'Delete',
                            onPress: () =>{_this.refs.bbb.innerHTML='';_this.setState({zongjia:'0'})},
                            style: { backgroundColor: '#F4333C', color: 'white',width:'100px' },
                        },
                    ]}
                >
                <List.Item>
                    <Flex>
                        <img src={_this.state.list.img} style={{width: '120px', height: '120px'}}/>
                        <Flex.Item>
                            <h2>{_this.state.list.name}</h2>
                            <p style={{color: '#888',fontSize:'14px'}}>{_this.state.list.des}</p>
                            <p style={{color: 'red'}}>￥{_this.state.list.pic}</p>
                            <List.Item
                                wrap
                                extra={
                                    <Stepper
                                        style={{width: '100%', minWidth: '100px'}}
                                        showNumber
                                        max={99}
                                        min={1}
                                        value={this.state.val}
                                        onChange={this.onChange}
                                    />}>数量</List.Item>
                        </Flex.Item>
                    </Flex>
                </List.Item>
                </SwipeAction>
            </List>)
        } else {
            return(
                <h1>您的购物车还未商品，请您添加商品</h1>
            )
        }
    }
    onChange = (val) => {
        // console.log(val);
        var zongjia = this.state.list.pic * val;
        this.setState({val, zongjia});
    }

    render() {
        var _this = this;
        return (
            <div style={{height: '100vh', overflow: 'hidden'}}>
                {/*头部*/}
                <NavBar className='banner'
                        mode="dark"
                        icon={<Icon type="left"/>}
                        onLeftClick={() => this.context.router.history.goBack()}
                >购物车</NavBar>
                {/*内容*/}
                <section className='banner' ref='bbb'>
                    {_this.message()}
                </section>
                <footer style={{
                    position: 'fixed',
                    bottom: '0',
                    left: '0',
                    width: '100%',
                    height: '50px',
                    background: '#fff',
                    lineHeight: '50px'
                }}>
                    <WingBlank>
                        <Flex justify='between'>
                            <Flex.Item>
                                <span style={{fontSize: '20px', fontWeight: '800'}}>总价:{this.state.zongjia}</span>
                            </Flex.Item>

                            <Flex.Item>
                                <Button type='primary' onClick={offline}>立即购买</Button>
                            </Flex.Item>
                        </Flex>
                    </WingBlank>
                </footer>
            </div>
        )
    }
}
const dingdan = [
    {
        icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
        text:'待支付'
    },
    {
        icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
            text:'待发货'
    },
    {
        icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
        text:'待收货'
    },
    {
        icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
        text:'退货售后'
    }
];
//我的
export class Myself extends React.Component{
    constructor(props) {
        super(props);
        this.state={

        }
    }
    static contextTypes = {
        router: PropTypes.object.isRequired,
    }
    render() {
       let islogin;
       if(Cookie.getCookie('name')){
           let username=Cookie.getCookie('name')
           islogin=(<Flex style={{width:'100%'}}>
                <img style={{width:'60px', height: '60px', borderRadius: '50%',marginRight:'10px' }} src='https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg' alt="" />
                <Flex.Item style={{ lineHeight: 1.6,display:'flex',justifyContent:'space-between' }}>
                    <Flex direction='column' align='start'>
                        <div style={{ fontSize:'16px', fontWeight: 'bold' }}>{username}</div>
                        <div style={{ fontSize:'14px', color:'#888' }}>vip</div>
                    </Flex>
                    <Flex justify='between'>
                        <span>个人资料 ></span>
                    </Flex>
                </Flex.Item>
                </Flex>
           )
       }else{
           islogin=(<Button
                   style={{width:'100px',color:'red',fontWeight:'700'}}
                   onClick={()=>this.context.router.history.push('/login')}
               >
                   登入
               </Button>
           )
       }

        return (
            <Flex direction='column' style={{height:'100vh'}}>
                {/*头部*/}
                <NavBar className='banner'
                        style={{width:'100%'}}
                        mode="dark"
                        icon={<Icon type="left"/>}
                        leftContent='首页'
                        onLeftClick={() => this.context.router.history.push('/')}
                >我的</NavBar>
                <WhiteSpace/>

                    <Flex.Item  style={{width:'100%'}}>
                        <WingBlank>
                            <WhiteSpace/>
                            {/*登录状态*/}
                            <div style={{borderRadius:'5px',display:'flex',justifyContent:'center'}}>
                                {islogin}
                            </div>
                            <WhiteSpace size='lg'/>
                            {/*余额*/}
                            <List.Item style={{borderRadius:'5px',fontWeight:'900'}}>
                                <WhiteSpace/>
                                <Flex justify='around'>
                                    <Flex direction='column'>
                                        <p>0 <span style={{fontSize:'12px'}}>元</span></p>
                                        <span>我的金币</span>
                                    </Flex>
                                    <Flex direction='column'>
                                        <p>54 <span style={{fontSize:'12px'}}>元</span></p>
                                        <span>我的代金券</span>
                                    </Flex>
                                </Flex>
                                <WhiteSpace/>
                            </List.Item>
                            <WhiteSpace size='lg'/>
                            {/*订单*/}
                            <Flex direction='column' className='banner' style={{borderRadius:'5px'}}>
                                <List.Item style={{width:'100%'}} extra="全部订单" arrow="horizontal" onClick={() => console.log("我的订单")}>
                                    我的订单
                                </List.Item>
                                <div style={{width:'100%'}}>
                                    <Grid data={dingdan} hasLine={false}/>
                                </div>
                            </Flex>
                            <WhiteSpace size='lg'/>
                            {/*拼团*/}
                            <List className='banner'>
                                <List.Item  arrow="horizontal" onClick={() => console.log("我的拼团")}>
                                    我的拼团
                                </List.Item>
                                <List.Item arrow="horizontal" onClick={() => console.log("收货地址")}>
                                    收货地址
                                </List.Item>
                            </List>
                            <WhiteSpace size='lg'/>
                            {/*客服*/}
                            <List className='banner'>
                                <List.Item  arrow="horizontal" onClick={() => console.log("我的客服")}>
                                    我的客服
                                </List.Item>
                                <List.Item arrow="horizontal" onClick={() => console.log("关于达令家")}>
                                    关于达令家
                                </List.Item>
                                <List.Item arrow="horizontal" onClick={() => console.log("商务合作")}>
                                    商务合作
                                </List.Item>
                            </List>
                            <WhiteSpace size='xl'/>
                        </WingBlank>
                    </Flex.Item>

                <Footer/>
            </Flex>
        );
    }
}

//登录
export class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }
    static contextTypes = {
        router: PropTypes.object.isRequired,
    }
    render() {
        let _this=this;
        return (
            <div style={{background:'#fff',height:'100vh'}}>
                {/*头部*/}
                <NavBar className='banner'
                        style={{width:'100%'}}
                        mode="dark"
                        icon={<Icon type="left"/>}
                        onLeftClick={() => this.context.router.history.goBack()}
                >登录</NavBar>
                <WhiteSpace/>
                <Flex direction='column' style={{marginTop:'100px'}}>
                    <div>
                        <img alt='' src='https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png' width='75' height='75'/>
                    </div>
                    <WhiteSpace size='xl'/>
                    <List className='login'>
                        <List.Item>用户名：<input ref='username' type='text' placeholder='请输入用户名'/></List.Item>
                        <List.Item>手机号：<input type='text' value='13755658427' disabled/></List.Item>
                        <List.Item>密　码：<input type='password' value='123456' disabled/></List.Item>
                        <WhiteSpace size='lg'/>
                        <Button
                            type='primary'
                            onClick={()=>{
                                var username=_this.refs.username.value;
                                if (username=='') {
                                    username='电线杆'
                                }
                                Cookie.setCookie('name',username,7)
                                _this.context.router.history.push('/')
                            }}
                        >登入</Button>
                    </List>
                </Flex>
            </div>
        );
    }
}